<!DOCTYPE html>
<!--suppress SpellCheckingInspection, HtmlFormInputWithoutLabel -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
    <link rel="stylesheet" href="../static/css/bootstrap-fileinput.css" th:href="@{/css/bootstrap-fileinput.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container mdui-p-t-2 mdui-p-b-2">
    <form method="post" action="/user" enctype="multipart/form-data" th:object="${user}">
        <input type="hidden" name="id" th:value="*{id}">
        <input type="hidden" name="_method" value="PUT" th:if="*{id!=null}">
        <!-- 姓名、联系方式 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">用户姓名</label>
                <input name="name" class="mdui-textfield-input" type="text" maxlength="16" required th:value="*{name}"/>
                <div class="mdui-textfield-error">请输入用户姓名</div>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">联系方式</label>
                <input name="phone" class="mdui-textfield-input" type="text" maxlength="16" pattern="^1[0-9]{10}$"
                       required th:value="*{phone}"/>
                <div class="mdui-textfield-error">请输入用户联系方式</div>
            </div>
        </div>
        <!-- 身份证号、性别、年龄 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">身份证号</label>
                <input name="idCard" class="mdui-textfield-input" required th:value="*{idCard}" pattern="^\d{18}|\d{17}(x|X)$"/>
                <div class="mdui-textfield-error">请选择用户身份证号</div>
            </div>
            <div class="mdui-col-md-3 mdui-textfield">
                <label class="mdui-textfield-label">性别</label>
                <select name="gender" class="mdui-select" style="width: 100%">
                    <option value="男" th:selected="*{'男' eq gender}">男</option>
                    <option value="女" th:selected="*{'女' eq gender}">女</option>
                </select>
            </div>
            <div class="mdui-col-md-3 mdui-textfield">
                <label class="mdui-textfield-label">年龄</label>
                <input name="age" class="mdui-textfield-input" type="number" th:value="*{age}"/>
            </div>
        </div>
        <!-- 住址 -->
        <div class="mdui-row">
            <div class="mdui-col-md-12 mdui-textfield">
                <label class="mdui-textfield-label">住址</label>
                <input class="mdui-textfield-input" type="text" name="address" maxlength="64" th:value="*{address}"/>
            </div>
        </div>
        <!-- 用户图片 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">用户照片</label>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="mdui-m-b-1">
                        <span class="mdui-btn mdui-btn-dense btn-file mdui-color-blue-accent mdui-ripple">
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-new">选择文件</span>
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-exists">换一张</span>
                            <input type="file" name="portraitFile" id="picID" accept="image/gif,image/jpeg,image/x-png">
                            <input type="hidden" name="portrait" th:value="*{portrait}">
                        </span>
                        <a href="javascript:void(0)" data-dismiss="fileinput"
                           class="mdui-btn mdui-btn-dense mdui-color-amber-accent fileinput-exists mdui-ripple">
                            移除
                        </a>
                    </div>
                    <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                        <img id="picImg" style="width: auto;height: auto;max-height: 140px;"
                             src="../static/image/noimage.png" th:src="${#strings.isEmpty(user.portrait)?'/image/noimage.png':'/portrait/'+user.portrait}" alt="">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail"
                         style="max-width: 200px; max-height: 150px;">
                    </div>
                </div>
            </div>
        </div>

        <div class="mdui-row">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-raised mdui-center" type="submit">
                <i class="mdui-icon mdui-icon-left material-icons">&#xe161;</i>
                保存
            </button>
        </div>
    </form>
</div>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script src="../static/js/jquery-2.1.1.js" th:src="@{/js/jquery-2.1.1.js}"></script>
<script src="../static/js/bootstrap-fileinput.js" th:src="@{/js/bootstrap-fileinput.js}"></script>
</body>
<script>
    var $$ = mdui.JQ;
    var listItem = $$('#users');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');
</script>
</html>